<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  ~ Copyright (c) 2017 Contributors to the Eclipse Foundation
  ~
  ~ See the NOTICE file(s) distributed with this work for additional
  ~ information regarding copyright ownership.
  ~
  ~ This program and the accompanying materials are made available under the
  ~ terms of the Eclipse Public License 2.0 which is available at
  ~ http://www.eclipse.org/legal/epl-2.0, or the Apache Software License 2.0
  ~ which is available at https://www.apache.org/licenses/LICENSE-2.0.
  ~
  ~ SPDX-License-Identifier: EPL-2.0 OR Apache-2.0
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<div class="localLoader" [class.hidden]="!loading">
    <winery-loader></winery-loader>
</div>
<div *ngIf="!loading">
    <winery-table
        [data]="tagsData"
        [columns]="columns"
        [disableButtons]="!sharedData?.currentVersion?.editable"
        (cellSelected)="onCellSelected($event.row)"
        [itemsPerPage]="10"
        (removeBtnClicked)="onRemoveClick($event)"
        (addBtnClicked)="onAddClick();">
    </winery-table>
</div>
<winery-modal bsModal #addModal="bs-modal" [modalRef]="addModal">
    <winery-modal-header [title]="'Add Tag'">
    </winery-modal-header>
    <winery-modal-body>
        <form #addTagForm="ngForm" id="addTagForm">
            <div class="form-group">
                <label class="control-label" for="name">Name</label>
                <input #nameInput="ngModel"
                       id="name"
                       class="form-control"
                       type="text"
                       name="name"
                       required
                       [(ngModel)]="newTag.name"
                       [wineryDuplicateValidator]="validatorObject"
                />
                <div *ngIf="nameInput.errors && (nameInput.dirty || nameInput.touched)"
                     class="alert alert-danger">
                    <div [hidden]="!nameInput.errors.wineryDuplicateValidator">
                        No duplicates allowed!
                    </div>
                    <div [hidden]="!nameInput.errors.required">
                        Name is required!
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label" for="value">Value</label>
                <input #valueInput="ngModel"
                       id="value"
                       class="form-control"
                       type="text"
                       name="value"
                       required
                       [(ngModel)]="newTag.value"
                />
                <div *ngIf="valueInput.errors && (valueInput.dirty || valueInput.touched)"
                     class="alert alert-danger">
                    <div [hidden]="!valueInput.errors.wineryDuplicateValidator">
                        No duplicates allowed!
                    </div>
                    <div [hidden]="!valueInput.errors.required">
                        Name is required!
                    </div>
                </div>
            </div>
        </form>
    </winery-modal-body>
    <winery-modal-footer (onOk)="addNewTag()"
                         [closeButtonLabel]="'Cancel'"
                         [okButtonLabel]="'Add'"
                         [disableOkButton]="!addTagForm?.form.valid">
    </winery-modal-footer>

</winery-modal>

<winery-modal bsModal #confirmDeleteModal="bs-modal" [modalRef]="confirmDeleteModal">
    <winery-modal-header [title]="'Delete Tag'">
    </winery-modal-header>
    <winery-modal-body>
        <p *ngIf="selectedCell != null" id="diagyesnomsg">
            Do you want to delete the Element <span style="font-weight:bold;">{{ selectedCell.name }}</span>?
        </p>
    </winery-modal-body>
    <winery-modal-footer (onOk)="removeConfirmed();"
                         [closeButtonLabel]="'Cancel'"
                         [okButtonClass]="'btn-danger'"
                         [okButtonLabel]="'Delete'">
    </winery-modal-footer>
</winery-modal>
